<template>
  <Table border :columns="columns" :data="tableData">

  </Table>
</template>
<script>
import echart from "echarts";
import { getHlData } from "@/api/scada";

export default {
    name: "echart",
    props: {},
    data() {
        return {

            columns: [
                {title: "设备名称", key: "name", className: "device-name-column"},
            ],
            tableData: [],
            dataOriginal: []

        };
    },

    mounted() {
        getHlData().then(res => {
            let arr = [];
            if (res.code === 200) {
                arr = res.result;
                for (let i = 0; i <24 ; i++) {
                    this.tableData[i] = {name:`支路${i+1}电流(A)`};
                }
                arr.forEach((item, index) => {
                    let column = {
                        title: `#${index+1}子阵#${index+1}号`,
                        key: "loopOnOffState", render: (h, params) => {
                            let obj = {}
                            let status = 'status' + index
                            let value = 'value' + index
                            if(params.row[status]) {
                                if (params.row[status] == 0) {
                                    obj = h("div", [
                                        h("span", params.row[value])
                                    ]);
                                }
                                else {
                                    obj = h("div", [
                                        h("span", params.row[value]),
                                        h("span",{
                                            style:{
                                                background:'rgb(252, 127, 125)',
                                                color:'white',
                                                borderRadius:'3px',
                                                display:'inline-block',
                                                height:'20px',
                                                lineHeight:'20px',
                                                marginLeft:'5px',
                                                padding:'0 5px'
                                            }
                                        }, "电流过流")
                                    ]);
                                }
                            } else {
                                obj = h("div", [
                                    h("span", '-')
                                ]);
                            }

                            return obj
                        }
                    }
                    this.columns.push(column)
                    for (let i = 1; i <=24 ; i++) {
                        this.tableData[i-1]['value'+index]=item.moStringFormationData['current'+i]
                        this.tableData[i-1]['status'+index]=item.moStringFormationData['status'+i]
                    }
                })
                console.log(this.tableData)
            }
        });
    },
    computed: {},
    created() {
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style lang="scss">
   .ivu-table-tip table tr td {
    text-align: center;
    background-image: url("~@/assets/img/zwsj.png");
    background-position: center 60px;
    background-repeat: no-repeat;
    color: #999;
    height: 369px;
    background-size: 190px;
    span {
      display: none;
    }
  }
  .device-name-column .ivu-table-cell span {
    font-weight: 700;
    color: #515a6e;
  }
</style>
